<template>
  <div class="box">
    <!-- 实时天气 -->
    <div class="bianK">
      <div>
        <div v-if="temperature === '多云'" class="tian">
          <i class="icon-Group"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">多云</div>
        </div>
        <div v-else-if="temperature === '雨'" class="tian">
          <i class="icon-yu"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">雨</div>
        </div>
        <div v-else-if="temperature === '晴'" class="tian">
          <i class="icon-qing"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">晴</div>
        </div>
        <div v-else-if="temperature === '阴'" class="tian">
          <i class="icon-yin"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">阴</div>
        </div>
        <div v-else-if="temperature === '雪'" class="tian">
          <i class="icon-xue"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">雪</div>
        </div>
        <div v-else-if="temperature === '雾'" class="tian">
          <i class="icon-wu"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">雾</div>
        </div>
        <div v-else-if="temperature === '冰雹'" class="tian">
          <i class="icon-bingbao"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">冰雹</div>
        </div>
        <div v-else-if="temperature === '雷阵雨'" class="tian">
          <i class="icon-leizhenyu"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">雷阵雨</div>
        </div>
        <div v-else-if="temperature === '浮尘'" class="tian">
          <i class="icon-fuchen"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">浮尘</div>
        </div>
        <div v-else-if="temperature === '扬沙'" class="tian">
          <i class="icon-yangsha"></i>
          <div style="color: #fff">天气</div>
          <div class="tianQi">扬沙</div>
        </div>
        <!-- <div v-else>
          <i class="fas fa-question-circle"></i>
        </div> -->
      </div>
      <!-- 实时时间 -->
      <div class="dataRight">
        <span class="dataRightO">{{ currentDate }}</span>
        <span class="dataRightO">{{ currentDay }}</span>
        <span class="dataRighT">{{ currentTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'TransitLeftTop',

  data() {
    return {
      // 实时时间
      currentDate: '',
      currentTime: '',
      currentDay: '',
      temperature: '',
      description: '',
      city: ''
    }
  },
  created() {
    this.getWeatherData()
  },
  mounted() {
    this.updateDateTime() // 初始化日期和时间
    setInterval(this.updateDateTime, 1000) // 每秒钟更新日期和时间
  },

  methods: {
    // 实时天气 滨州城市ID：101121101
    getWeatherData() {
      const apiUrl = `http://gfapi.mlogcn.com/weather/v001/now?areacode=101121101&key=5ezufiGLlTP519fcobvMTOZzAD3NBF8V` // 替换成你要查询天气的位置
      axios
        .get(apiUrl)
        .then((response) => {
          // console.log(response)
          this.temperature = response.data.result.realtime.text
          // console.log(this.temperature)
          // this.description = response.data.current.condition.text
          // this.city = response.data.location.name
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 实时时间
    updateDateTime() {
      const now = new Date()
      // 格式化日期
      const year = now.getFullYear()
      const month = this.formatDigits(now.getMonth() + 1)
      const day = this.formatDigits(now.getDate())
      this.currentDate = `${year}-${month}-${day}`
      // 格式化时间
      const hours = this.formatDigits(now.getHours())
      const minutes = this.formatDigits(now.getMinutes())
      const seconds = this.formatDigits(now.getSeconds())
      this.currentTime = `${hours}:${minutes}:${seconds}`
      // 获取星期几
      const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
      const dayIndex = now.getDay()
      this.currentDay = days[dayIndex]
    },
    formatDigits(value) {
      return value < 10 ? `0${value}` : value
    }
  }
}
</script>

<style lang="less" scoped>
.bianK {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
  font-size: 18px;
  border: 2px solid #0044ff;
  border-radius: 10px;
  box-shadow: inset 0px 0px 10px 34px rgba(3, 9, 90, 60%);
  position: relative;
}

.box {
  display: flex;
  height: 90px;
  align-content: space-between;

  .tian {
    display: flex;
    align-items: center;
  }

  .tianQi {
    color: #86eaeb;
    padding: 0 30px 0 10px;
  }

  .dataRight {
    .dataRightO {
      color: #f8f8fa;
      padding-right: 15px;
    }

    .dataRighT {
      color: #8bf2f4;
      padding-left: 15px;
    }
  }
}
</style>